<template>
  <view class="app-container">
    <view class="vehicle-list" style="border-radius: 40rpx;height: 300rpx;">
      <view v-for="(vehicle, index) in vehicles" :key="index" class="vehicle-item" @click="selectVehicle(index)">
        <image src="/static/车辆-01@2x.png" class="vehicle-image" />
        <view class="vehicle-info">
          <text class="vehicle-type">车型：{{ vehicle.model }}</text>
          <text class="vehicle-brand">车牌：{{ vehicle.license }}</text>
        </view>
        <view class="vehicle-select">
          <image v-if="selectedIndex === index" src="/static/组 5 拷贝.png" class="select-icon" />
          <image v-else src="/static/椭圆 4 拷贝 2.png" class="select-icon" />
        </view>
      </view>
    </view>

    <button class="add-vehicle-button" @click="addVehicle" style="margin-top: 800rpx;">+ 添加车辆</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      vehicles: [
        { model: "奔驰-GR", license: "瑶M35468" },
        { model: "宝马-X5", license: "瑶M12345" }
      ],
      selectedIndex: null // 选中的车辆索引
    };
  },
  methods: {
    selectVehicle(index) {
      this.selectedIndex = index; // 设置选中的车辆索引
    },
    addVehicle() {
      // 添加车辆的逻辑
      console.log("添加车辆逻辑");
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20rpx;
  background-color: #f9f9f9;
  min-height: 100vh; /* 确保内容至少占满整个视口 */
}

.vehicle-list {
  margin-bottom: 20rpx;
}

.vehicle-item {
  display: flex;
  align-items: center; /* 使子元素垂直居中 */
  padding: 20rpx; /* 增加内边距以提高高度 */
  background-color: white;
  border: 1rpx solid #e0e0e0;
  border-radius: 15rpx; /* 增加边框圆角 */
  margin-bottom: 10rpx;
  height: 100rpx; /* 直接设置高度 */
}

.vehicle-image {
  width: 80rpx; /* 适当增加图片宽度 */
  height: 80rpx; /* 适当增加图片高度 */
  margin-right: 20rpx; /* 适当增加右边距 */
}

.vehicle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 使文字垂直居中 */
}

.vehicle-type {
  display: block;
  margin-bottom: 10rpx; /* 增加车型和车牌之间的距离 */
}

.vehicle-brand {
  display: block;
  font-size: 24rpx; /* 减小车牌字体大小，可按需调整 */
}

.vehicle-select {
  width: 40rpx; /* 适当增加选择图标容器宽度 */
  height: 40rpx; /* 适当增加选择图标容器高度 */
}

.select-icon {
  width: 100%;
  height: 100%;
}

.add-vehicle-button {
  background-color: #007aff;
  color: white;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 20rpx; /* 添加边框圆角 */
  cursor: pointer;
  text-align: center; /* 文字水平居中 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 文字水平居中 */
  align-items: center; /* 文字垂直居中 */
  font-size: 26rpx; /* 减小字体大小，可按需调整 */
}
</style>